[#ftl]
[#--include "../../util.ftl"/--]

 [@define "agile.html.Image"  "agile._Component,agile._Resizable" ]
	category:"Image Component"	
	,widgetName:"Image"
	[#assign templateString][#compress]
 	<div class='agileComponent agileImage'>	
 		<span data-dojo-attach-point="errorMessage" class="errorMessage" style="display:none"></span>
 		<img data-dojo-attach-point="image" src="{parameters.src}" height="{style.height}" width="{style.width}"></img> 
 		<button data-dojo-attach-point="uploader" style="width:120px;height:18px;margin-top:1px;margin-bottom:1px;" data-dojo-type="dojox.form.Uploader" data-dojo-props='multiple:false,acceptedMIME:["jpeg","jpg","png","gif"],label:"Select Image",uploadOnSelect:true,url:"${context}/prototype10/command/upload.do?version=1.0"'></button> 
 	</div>
	[/#compress][/#assign]
	,templateString:"${templateString?js_string}"	
	,resizeAxis:"xy"		
//	,templateMap:agile.delegate(agile._Component.prototype.templateMap,{
//		//dojo:"<a style='position:absolute;left:{style.left};top:{style.top}' href='{href}' target='{target}'>{value}</a>\n"
//		dojo:"<img style='{style}' {parameters}></img>"		
//	})
	,templateMap:{
		dojo:'<img {html-style} {html-parameters}></img>'
		,agile:"<div data-dojo-type='{declaredClass}' data-dojo-props='{style-props}'>{innerWidets}</div>"
	}	
	
	,styleConstraints:agile.delegate(agile._Component.prototype.styleConstraints,{
		"width": {onValueChange:function(ownerWidget,name,htmlName,value){				   
					style.set(ownerWidget.image,name,value);					
			   }
		   	}
		,"height": {onValueChange:function(ownerWidget,name,htmlName,value){			   
			style.set(ownerWidget.image,name,value);			
	   }
   	}
	})
	,attributes:agile.delegate(agile._Component.prototype.attributes,{	
		src:lang.mixin({},agile.UploaderMetadata,{
			label:"i18n_image"
			,acceptedMIME:'["jpg","jpeg","png","gif"]'
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//				console.log("@@@@@@@@@@@changed:",arguments);
				widget.metadata(this.metadataCategory+"."+name,value);	
				widget.image.src = value;
			}
		})
		,alt:lang.mixin({},agile.TextMetadata,{	
			label:"i18n_alternative"
			,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){	
				widget.metadata(this.metadataCategory+"."+name,value);
				widget.image.alt = value;
			}
		})
		,usemap:lang.mixin({},agile.TextMetadata,{_hidden:true,label:"i18n_usemap"})
	})		
	,initDefaultMetadata:function(){
		this.metadata("parameters.alt","");
		this.metadata("parameters.src","");
		this.metadata("style.height",100);
		this.metadata("style.width",200);
	}
	,init:function(){
		
		style.set(this.uploader.domNode,{display:"none"});
		
		aspect.after(this,"onSelected",lang.hitch(this,function(){
			style.set(this.uploader.domNode,{display:"block"});
		}));
		aspect.after(this,"onDeselected",lang.hitch(this,function(){
			if(this.metadata("parameters.src") != ""){
				style.set(this.uploader.domNode,{display:"none"});
			}
		}));
		
		aspect.after(this.uploader,"onComplete",lang.hitch(this,function(fileName){
//			console.log("Upload Complete:",fileName);
			if(fileName.indexOf("error") == 0){
				style.set(this.errorMessage,{display:"block"});
				this.errorMessage.innerText = fileName;	
				this.image.src = "";
				this.metadata("parameters.src",this.image.src);
			}else{
				style.set(this.errorMessage,{display:"none"});
				this.errorMessage.innerText = "";			
				this.image.src = ""+fileName;			
				this.metadata("parameters.src",this.image.src);
				style.set(this.image,{display:"block"});
			}
			topic.publish("agile.widget.changed",this.category,"src",this.metadata("parameters.src"));
			
		}),true);

		aspect.after(this.uploader,"onError",function(newValue){
//			//console.log("Upload error",newValue);
			topic.publish("agile.message","error",null,newValue,"failed to upload file");
		},true);		
	}
	
	,getResizableTargetContainer:function(){				
		return this.image;	
	}
	,onResizeStop:function(marginBox){
//	####	//console.log(this.declaredClass,"[gile.html.Image]:onResizeStop",marginBox);
		topic.publish("agile.widget.changed.styles",this,"style.width",marginBox.w);					
		this.metadata("style.width",marginBox.w + this.getContainerOutterBox().w);

		topic.publish("agile.widget.changed.styles",this,"style.height",marginBox.h);		
		this.metadata("style.height",marginBox.h + this.getContainerOutterBox().h);
		
		style.set(this.domNode,{width:this.metadata("style.width"),height:this.metadata("style.height")});
	}
//	,toHtml:function(cascade,indentCount,sourceType){
//		if(sourceType == "dojo"){
//			//var indent = this.indent(indentCount);
//			var styleStr = this.serializeStyle2(sourceType).replace("style:","style=");
//			return lang.replace(this.templateMap[sourceType],{style:styleStr,parameters:this.metadata("parameters")});	
//		}else{
//			return this.inherited(arguments);
//		}
//	}
//	,getStyleNodes:function(){
//		return [this.image];
//	}
[/@]
